<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="../../js/vue.js"></script>
		<title>05姓名案例_watch的写法</title>
	</head>
	<body>
		<!-- 
		  computed和watch之间的区别:
				1.computed能完成的功能,watch都可以完成。
				2.watch能完成的功能，computed不一定能完成，例如: watch可以进行异步操作。
				computed(计算属性需要返回值) watch(侦听属性是自己写的方法)

		  两个重要的小原则:
				1.所被Vue管理的函数，最好写成普通函数，这样this的指向才是vm或组件实例对象。
				2.所有不被Vue所管理的函数（定时器的回调函数、ajax的回调函数等、Promise的回调函数)，最好写成箭头函数,                      这样this的指向才是vm或组件实例对象。 
	  -->

		<div id="app">
			姓：<input type="text" v-model="firstName" /><br /><br />
			名：<input type="text" v-model="lastName" /><br /><br />
			全名：<span>{{fullName}}</span>
		</div>
		<script>
			const vm = new Vue({
				el: '#app',
				data: function() {
					return {
						firstName: '张',
						lastName: '三',
						fullName: '张-三'
					}
				},
				methods: {

				},
				computed: {

				},
				watch: {
					firstName(newVlaue, oldValue) {
						this.fullName = newVlaue + "-" + this.lastName;
					},
					lastName(newVlaue, oldValue) {
						this.fullName = this.firstName + "-" + newVlaue;
					}
				}
			});
		</script>
	</body>
</html>